<!--  -->
<template>
    <div class="give-list">
        <template v-for="(item,index) in giveList">
            <router-link tag="div" :to="{name:'teamRewardDetail',params:{id:item.gau_id},query:{type:2}}" class="give-item f-12" :key="index">
                <div class="flex justify-between">
                    <span>获奖时间:{{item.open_time}}</span>
                    <span class="f-14 color-gray">{{item.ship_info||'没发货'}}</span>
                </div>
                <div class="body">
                    <div class="flex info">
                        <img class="product-img" :src="item.reward_img" alt="">
                        <div class="product-msg">
                            <div class="product-name ellipsis">{{item.goods_name}}</div>
                            <div class="mt-8 color-gray">金额: ￥{{item.reward_price}}</div>
                            <div class="ellipsis company">{{item.reward_name}}</div>
                        </div>
                    </div>
                    <div class="clear-fix">
                        <div class="tag">第{{item.issue_id}}期</div>
                    </div>
                </div>
            </router-link>
        </template>
        
        <div class="no-data" v-if="giveList.length==0"></div>
    </div>
</template>

<script>
export default {
  components: {},
  props:{
      giveList:{
          type:Array,
          default:()=>{
              return []
          },
          required:true
      }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.give-list{
    .give-item{
        margin: 0 7px;
        padding: 12px 17px 15px;
        border-bottom: 1px solid #EAEAEA;
    }
    .body{
        margin-top: 10px;
         padding: 10px 7px 7px 8px;
        background: #F8F8F8;
        .info{
           
        }
        .product-img{
            height: 58px;
            width: 58px;
        }
        .product-msg{
            flex: 1;
            margin-left: 10px;
        }
        .product-name{
            width:202px;
        }
        .company{
            margin-top: 16px;
            color: #BCBCBC;
            width: 191px;
        }
        .tag{
            float: right;
            padding: 2px 6px;
            background: #B3B2B2;
            color:#EAEAEA;
            border-radius: 3px;
        }
    }
}
</style>